<template>
  <div class="tab-title !mt-0">
    {{ t('ustcstudent.view.tabExp.work') }}
    <div v-if="editMode" class="btn-group">
      <el-button type="success" plain @click="handleAddRow1" disabled>
        <Icon icon="ep:plus" class="mr-5px" />
        {{ t('common.addRow') }}
      </el-button>
      <el-button type="danger" plain @click="handleDeleteRow1" disabled>
        <Icon icon="ep:delete" class="mr-5px" />
        {{ t('common.deleteRow') }}
      </el-button>
    </div>
  </div>
  <vxe-table
    ref="tableWorkRef"
    :data="model.works"
    :row-config="{ useKey: true, drag: true }"
    :column-config="{ useKey: true, resizable: true }"
    :size="vxeTableSize"
    stripe
    @row-dragend="rowWorkDragendEvent"
    :checkbox-config="{ highlight: true }"
  >
    <vxe-column v-if="editMode" type="checkbox" align="center" width="50" />
    <vxe-column type="seq" align="center" width="70" :drag-sort="editMode && false" />
    <vxe-column
      :title="t('ustcStudentInfoWorkExp.fields.startDate')"
      field="startDate"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <EditDate v-model="scope.row.startDate" :show-copy="false" text-align="center" disabled />
      </template>
    </vxe-column>
    <vxe-column
      :title="t('ustcStudentInfoWorkExp.fields.endDate')"
      field="endDate"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <EditDate v-model="scope.row.endDate" :show-copy="false" text-align="center" disabled />
      </template>
    </vxe-column>
    <vxe-column
      :title="t('ustcStudentInfoWorkExp.fields.company')"
      field="company"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <EditInput v-model="scope.row.company" :show-copy="false" text-align="center" disabled />
      </template>
    </vxe-column>
    <vxe-column
      :title="t('ustcStudentInfoWorkExp.fields.work')"
      field="work"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <EditInput v-model="scope.row.work" :show-copy="false" text-align="center" disabled />
      </template>
    </vxe-column>
    <vxe-column
      :title="t('ustcStudentInfoWorkExp.fields.position')"
      field="position"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <EditInput v-model="scope.row.position" :show-copy="false" text-align="center" disabled />
      </template>
    </vxe-column>
    <vxe-column
      :title="t('ustcStudentInfoWorkExp.fields.certifier')"
      field="certifier"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <EditInput v-model="scope.row.certifier" :show-copy="false" text-align="center" disabled />
      </template>
    </vxe-column>
    <vxe-column
      :title="t('ustcStudentInfoWorkExp.fields.remark')"
      field="remark"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <EditInput v-model="scope.row.remark" :show-copy="false" text-align="center" disabled />
      </template>
    </vxe-column>
  </vxe-table>

  <div class="tab-title">
    {{ t('ustcstudent.view.tabExp.education') }}
    <div v-if="editMode" class="btn-group">
      <el-button type="success" plain @click="handleAddRow2" disabled>
        <Icon icon="ep:plus" class="mr-5px" />
        {{ t('common.addRow') }}
      </el-button>
      <el-button type="danger" plain @click="handleDeleteRow2" disabled>
        <Icon icon="ep:delete" class="mr-5px" />
        {{ t('common.deleteRow') }}
      </el-button>
    </div>
  </div>
  <vxe-table
    ref="tableStudyRef"
    :data="model.educations"
    :row-config="{ useKey: true, drag: true }"
    :column-config="{ useKey: true, resizable: true }"
    :size="vxeTableSize"
    stripe
    @row-dragend="rowStudyDragendEvent"
    :checkbox-config="{ highlight: true }"
  >
    <vxe-column v-if="editMode" type="checkbox" align="center" width="50" />
    <vxe-column type="seq" align="center" width="70" :drag-sort="editMode && false" />
    <vxe-column
      :title="t('ustcStudentInfoStudyExp.fields.schoolName')"
      field="schoolName"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <EditInput v-model="scope.row.schoolName" :show-copy="false" text-align="center" disabled />
      </template>
    </vxe-column>
    <vxe-column
      :title="t('ustcStudentInfoStudyExp.fields.startDate')"
      field="startDate"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <EditDate v-model="scope.row.startDate" :show-copy="false" text-align="center" disabled />
      </template>
    </vxe-column>
    <vxe-column
      :title="t('ustcStudentInfoStudyExp.fields.endDate')"
      field="endDate"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <EditDate v-model="scope.row.endDate" :show-copy="false" text-align="center" disabled />
      </template>
    </vxe-column>
    <vxe-column
      :title="t('ustcStudentInfoStudyExp.fields.majorName')"
      field="majorName"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <EditInput v-model="scope.row.majorName" :show-copy="false" text-align="center" disabled />
      </template>
    </vxe-column>
    <vxe-column
      :title="t('ustcStudentInfoStudyExp.fields.majorDesc')"
      field="majorDesc"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <EditInput v-model="scope.row.majorDesc" :show-copy="false" text-align="center" disabled />
      </template>
    </vxe-column>
    <vxe-column
      :title="t('ustcStudentInfoStudyExp.fields.degree')"
      field="degree"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <EditInput v-model="scope.row.degree" :show-copy="false" text-align="center" disabled />
      </template>
    </vxe-column>
    <vxe-column
      :title="t('ustcStudentInfoStudyExp.fields.degreeType')"
      field="degreeType"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <EditInput v-model="scope.row.degreeType" :show-copy="false" text-align="center" disabled />
      </template>
    </vxe-column>
    <vxe-column
      :title="t('ustcStudentInfoStudyExp.fields.schoolLocation')"
      field="schoolLocation"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <EditInput
          v-model="scope.row.schoolLocation"
          :show-copy="false"
          text-align="center"
          disabled
        />
      </template>
    </vxe-column>
    <vxe-column
      :title="t('ustcStudentInfoStudyExp.fields.studyDuration')"
      field="studyDuration"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <EditInput
          v-model="scope.row.studyDuration"
          :show-copy="false"
          text-align="center"
          disabled
        />
      </template>
    </vxe-column>
    <vxe-column
      :title="t('ustcStudentInfoStudyExp.fields.graduated')"
      field="graduated"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <EditInput v-model="scope.row.graduated" :show-copy="false" text-align="center" disabled />
      </template>
    </vxe-column>
    <vxe-column
      :title="t('ustcStudentInfoStudyExp.fields.certifier')"
      field="certifier"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <EditInput v-model="scope.row.certifier" :show-copy="false" text-align="center" disabled />
      </template>
    </vxe-column>
    <vxe-column
      :title="t('ustcStudentInfoStudyExp.fields.certifierUnit')"
      field="certifierUnit"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <EditInput
          v-model="scope.row.certifierUnit"
          :show-copy="false"
          text-align="center"
          disabled
        />
      </template>
    </vxe-column>
    <vxe-column
      :title="t('ustcStudentInfoStudyExp.fields.remark')"
      field="remark"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    >
      <template #default="scope">
        <EditInput v-model="scope.row.remark" :show-copy="false" text-align="center" disabled />
      </template>
    </vxe-column>
  </vxe-table>
</template>

<script setup lang="ts">
import EditInput from './input/EditInput.vue'
import EditDict from './input/EditDict.vue'
import EditDate from './input/EditDate.vue'
import { DICT_TYPE } from '@/utils/dict'
import { StudentInfoPersonalViewVO } from '@/types/ustcstudent'
import { useAppStore } from '@/store/modules/app'
import type { VxeTableInstance, VxeTableEvents } from 'vxe-table'
import { UstcStudentInfoWorkExpVO } from '@/api/core/ustcstudentinfoworkexp'
import { UstcStudentInfoStudyExpVO } from '@/api/core/ustcstudentinfostudyexp'

const { t } = useI18n()

const appStore = useAppStore()
const vxeTableSize = computed(() => appStore.getCurrentSizeVxe)

const editMode = inject('editMode', true)

const model = defineModel<StudentInfoPersonalViewVO>({ required: true })

const tableWorkRef = ref<VxeTableInstance<UstcStudentInfoWorkExpVO>>()
const tableStudyRef = ref<VxeTableInstance<UstcStudentInfoStudyExpVO>>()

const rowWorkDragendEvent: VxeTableEvents.RowDragend = () => {
  const $table = tableWorkRef.value
  if ($table) {
    const { visibleData } = $table.getTableData()
    model.value.works = visibleData
  }
}

const rowStudyDragendEvent: VxeTableEvents.RowDragend = () => {
  const $table = tableStudyRef.value
  if ($table) {
    const { visibleData } = $table.getTableData()
    model.value.educations = visibleData
  }
}

const handleAddRow1 = () => {
  model.value.works.push({})
}
const handleDeleteRow1 = () => {
  const $table = tableWorkRef.value
  if ($table) {
    const selectRecords = $table.getCheckboxRecords()
    if (selectRecords.length === 0) {
      return
    }

    const xRows = selectRecords.map((item) => item._X_ROW_KEY)
    // 根据_X_ROW_KEY过滤数组
    model.value.works = model.value.works.filter((item) => !xRows.includes(item._X_ROW_KEY))
  }
}

const handleAddRow2 = () => {
  model.value.educations.push({})
}
const handleDeleteRow2 = () => {
  const $table = tableStudyRef.value
  if ($table) {
    const selectRecords = $table.getCheckboxRecords()
    if (selectRecords.length === 0) {
      return
    }

    const xRows = selectRecords.map((item) => item._X_ROW_KEY)
    // 根据_X_ROW_KEY过滤数组
    model.value.educations = model.value.educations.filter(
      (item) => !xRows.includes(item._X_ROW_KEY)
    )
  }
}
</script>

<style scoped lang="scss">
.tab-title {
  color: var(--el-text-color-primary);
  font-size: 16px;
  font-weight: bold;
  margin: 16px 0;

  display: flex;
  align-items: center;

  .btn-group {
    margin-left: 20px;
  }
}
</style>
